feat(ui): add keyboard shortcut hint to chat input#1408
feat(ui): add keyboard shortcut hint to chat input#1408opspawn wants to merge 2 commits intokagent-dev:mainfrom
Conversation
Display a subtle "Ctrl+Enter to send" (or "⌘+Enter to send" on macOS) hint next to the Send button so users discover the keyboard shortcut. - OS-aware: detects macOS via navigator.userAgent and shows ⌘ symbol - Uses muted foreground color and extra-small text to stay unobtrusive - Positioned left of the action buttons with mr-auto for alignment Closes kagent-dev#824 Signed-off-by: Sean Florez <sean@opspawn.com>
Replace useMemo with useState + useEffect to detect the OS-specific shortcut key (⌘ vs Ctrl). The server always renders "Ctrl" as the default, and the client updates to "⌘" on Mac after mount, avoiding a server/client HTML mismatch. Signed-off-by: fl-sean03 <fl.sean03@gmail.com>
There was a problem hiding this comment.
Pull request overview
Adds an inline keyboard-shortcut hint next to the chat “Send” button to make the Ctrl/⌘+Enter submit behavior discoverable (closes #824).
Changes:
- Detects platform to choose between
Ctrland⌘for the hint. - Renders a subtle shortcut hint in the action row next to the Send button.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const [shortcutKey, setShortcutKey] = useState("Ctrl"); | ||
| useEffect(() => { | ||
| if (/Mac|iPhone|iPad|iPod/.test(navigator.userAgent)) { | ||
| setShortcutKey("⌘"); | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
The shortcut hint will render as "Ctrl" initially and then flip to "⌘" after mount on macOS, causing an avoidable extra render and a brief incorrect hint. Consider deriving the value in the useState lazy initializer (or a useMemo) so it’s correct on the first client render without needing setShortcutKey in an effect.
| const [shortcutKey, setShortcutKey] = useState("Ctrl"); | |
| useEffect(() => { | |
| if (/Mac|iPhone|iPad|iPod/.test(navigator.userAgent)) { | |
| setShortcutKey("⌘"); | |
| } | |
| }, []); | |
| const [shortcutKey] = useState(() => | |
| /Mac|iPhone|iPad|iPod/.test( | |
| typeof navigator !== "undefined" ? navigator.userAgent : "" | |
| ) | |
| ? "⌘" | |
| : "Ctrl" | |
| ); |
| const [shortcutKey, setShortcutKey] = useState("Ctrl"); | ||
| useEffect(() => { | ||
| if (/Mac|iPhone|iPad|iPod/.test(navigator.userAgent)) { | ||
| setShortcutKey("⌘"); | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
PR description says this uses a useMemo hook for OS detection and mentions SSR fallback, but the code uses useState + useEffect (and this is a client component). Please update the PR description (or adjust the implementation) so reviewers/users aren’t misled about the approach and SSR behavior.
Summary
Adds a subtle text hint next to the Send button showing the keyboard shortcut to submit a message:
⌘+Enter to sendCtrl+Enter to sendThe hint uses
text-xs text-muted-foregroundstyling to stay unobtrusive, and is positioned to the left of the action buttons usingmr-auto.Implementation
useMemohook withnavigator.userAgentdetection to determine OS<span>element in the existing button row — no layout changesCloses #824
Signed-off-by: Sean Florez sean@opspawn.com
Migrated from #1402 (originally submitted from wrong fork)